<template>
  <header>
    <!-- md-顶部导航 开始 -->
    <el-row>
      <el-col :span="4">
        <!-- 首页 Logo -->
        <a href="/">
          <img class="logo" src="@/assets/img/index/logo.png" height="50" width="138"
               title="经历网" alt="经历网logo" lazy/>
        </a>
        <!--        <nuxt-link to="/">-->
        <!--          <img class="logo" src="@/assets/img/index/logo.png" height="50" width="138"-->
        <!--               title="经历网" alt="经历网logo" lazy/>-->
        <!--        </nuxt-link>-->
      </el-col>
      <el-col :span="8" class="category">
        <div>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=1" class="item"> 经历</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=2" class="item"> 信息</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=3" class="item"> 艺术</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=4" class="item"> 觉悟</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=5" class="item"> 宣言</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=6" class="item"> 送别</nuxt-link>
          <nuxt-link to="/?current=1&size=10&createTime=1&categoryPid=7" class="item"> 服务</nuxt-link>
        </div>
      </el-col>
      <el-col :span="6" class="search">
        <!-- ES 搜索输入框 开始 -->
        <div>
          <el-input placeholder="请输入内容" v-model="keyword" clearable @keyup.enter.native="search(keyword)">
            <el-button slot="append" @click="search" type="primary" maxlength="30" clearable show-word-limit>
              搜索
            </el-button>
          </el-input>
        </div>
        <!-- /ES 搜索输入框 开始 -->
      </el-col>
      <el-col :span="6" class="login">
        <div>
          <span @click="back" class="back">〈〈</span>
          <!-- 未登录 显示登录和注册 -->
          <div class="status" v-if="!userId">
            <nuxt-link to="/auth/login" class="login-link">登录</nuxt-link>
            <el-divider direction="vertical"/>
            <nuxt-link to="/auth/register" class="register-link">注册</nuxt-link>
          </div>
          <!-- 已登录 显示 消息通知 个人头像 -->
          <div class="status" v-else>
            <!-- md发布新贴-->
            <a href="/article/edit">
              <b class="add">+</b>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
            <!-- <a :href="'/user/notice/'+userId"> -->
            <nuxt-link :to="'/user/notice/'+userId">
              <!-- md-消息通知 -->
              <el-badge :value="allUnreadCount" :max="99" class="md-msg"
                        :type="allUnreadCount == 0 ? 'info' : 'danger'"/>&nbsp;&nbsp;&nbsp;&nbsp;
            </nuxt-link>
            <!-- </a> -->
            <div class="avatar-box">
              <img class="avatar" :src="avatar" height="40" width="40" lazy alt=""/>
              <!-- md 头像下拉菜单 -->
              <div class="dropdown">
                <nuxt-link to="/article/edit" class="el-icon-edit-outline item"> 发布新帖</nuxt-link>
                <nuxt-link class="el-icon-s-home item" :to="'/user/'+userId"> 个人主页</nuxt-link>
                <nuxt-link class="el-icon-setting item" :to="'/user/private/'+userId" v-if="userId"> 私人空间</nuxt-link>
                <a class="el-icon-switch-button item" href="javascript:void(0);" @click="logout"> 退出系统</a>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- /md-顶部导航 结束 -->
    <!-- sm-下拉导航 开始 -->
    <div class="sm-nav" @click="isOpen = !isOpen">
      <!-- <span @click="back" class="sm-back">〈〈  </span>-->
      <span v-if="isOpen" class="iconfont icon-xingzhuang"></span>
      <span v-if="!isOpen" class="iconfont icon-shousuo"></span>
    </div>
    <transition name="nav">
      <div v-show="isOpen" class="sm-nav-dropdown">
        <!--  ES 搜索输入框 开始 -->
        <div class="sm-search">
          <el-input class="search-input" placeholder="请输入关键字" v-model="keyword" clearable
                    @keyup.enter.native="search(keyword)">
            <el-button class="el-icon-search" slot="append" @click="search"/>
          </el-input>
        </div>
        <!--  /ES 搜索输入框 结束 -->
        <!-- 用户头像-->
        <div class="sm-avatar-box" v-if="userId">
          <el-link :href="'/user/'+userId">
            <img class="sm-avatar" :src="avatar" height="40" width="40" lazy alt=""/>
            <b>Bing</b>&nbsp;&nbsp;&nbsp;
          </el-link>
          <!-- 消息总数 -->
          <nuxt-link :to="'/user/notice/'+userId">
            <el-badge :value="allUnreadCount" :max="99" :type="allUnreadCount === 0 ? 'info' : 'danger'"/>&nbsp;&nbsp;&nbsp;&nbsp;
          </nuxt-link>
        </div>
        <div>
          <span v-if="!userId" class="item iconfont icon-login-full" @click="toLogin">&nbsp;立即登录</span>
          <span v-if="!userId" class="item iconfont icon-zhucehaoxiafa" @click="toRegister">免费注册</span>
          <a class="item el-icon-edit-outline" href="javascript:void(0);" @click="toAddArticle">&nbsp;发布新帖</a>
          <span v-if="userId" class="item el-icon-user-solid" @click="toHome">&nbsp;个人主页</span>
          <span v-if="userId" class="item el-icon-setting" @click="toPrivate">&nbsp;私人空间</span>
          <a href="javascript:void(0);" class="item iconfont icon-exit-full" @click="logout" v-if="userId"> 退出系统</a>
          <div class="line"></div>
        </div>
      </div>
    </transition>
    <!-- /sm-下拉导航 结束 -->
  </header>
</template>
<script>
export default {
  name: 'Header',
  computed: {
    userId() {
      // 获取状态仓库中的用户名和头像
      return this.$store.state.userInfo && this.$store.state.userInfo.id
    },
    avatar() {
      // 获取状态仓库中的用户名和头像
      return this.$store.state.userInfo && this.$store.state.userInfo.avatar
    }
  },
  data() {
    return {
      keyword: "",
      isOpen: false,
      allUnreadCount: 0
    }
  },
  async created() {
    if (this.userId != null) {
      await this.getUserAllNoticeUnreadCount();
    }
  },
  methods: {
    // 未读系统通知总数
    async getUserAllNoticeUnreadCount() {
      const {data} = await this.$getUserAllNoticeUnreadCount(this.userId);
      this.allUnreadCount = data.allUnReadCount
    },
    // 带关键词跳转到 ElasticSearch 搜索结果页面
    search() {
      if (this.keyword === '') {
        this.$message({
          showClose: true,
          message: '请输入关键词',
          type: 'warning'
        });
        return
      }
      // 这种跳转方式，在搜索当前页面再输入关键字一样可以再搜索，因为是全面刷新式跳转
      window.location = '/search?keyword=' + this.keyword;
    },
    // 发贴入口（如果登录，跳转到发贴页面，未登录跳转到登录页面）
    toAddArticle() {
      if (this.userId) {
        window.location = '/article/edit';
      } else {
        window.location = '/auth/login';
      }
    },
    // 跳转到个人主页
    toHome() {
      this.isOpen = false
      this.$router.push('/user/' + this.userId)
    },
    // 跳转到私人空间
    toPrivate() {
      this.isOpen = false
      this.$router.push('/user/private/' + this.userId)
    },
    // 返回上一层
    back() {
      this.$router.go(-1);
    },
    // 跳转到登录页面（为了点击之后，关闭下拉菜单，并且路由跳转）
    toLogin() {
      this.isOpen = false
      window.location.href = '/auth/login';
    },
    // 去注册
    toRegister() {
      this.isOpen = false
      this.$router.push("/auth/register")
    },
    // 退出登录
    logout() {
      this.$confirm('您确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$logout().then(response => {
          if (response.code === 200) {
            this.$cookies.remove('token')
            this.$cookies.remove('userInfo')
            this.$store.dispatch('userLogout')
            // 跳转到 home 首页
            window.location = '/auth/login';
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less">

header {
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: wheat;
  background: black;
  border-top: 3px solid #e9c121;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 50%);

  .el-input__inner {
    color: white;
    border: solid 1px #515357;
    background-color: #494949;
  }

  /* 搜索框按钮样式 */

  .el-input-group__append button.el-button {
    color: #d2cece;
    background-color: black;
  }

  .el-button {
    line-height: 100%;
    border: solid 1px black;
    border-radius: unset;
  }

  .status {
    display: inline-block;
    margin-top: -10px;
  }

  b {
    color: #8c939d;
  }

  .login-link {
    margin-left: 30px;
  }

  .login-link, .add, .dropdown .item, .register-link {
    font-size: 16px;
    color: wheat;
  }

  .login-link:hover, .register-link:hover {
    color: yellow;
    box-shadow: 0 0 25px 8px red;
  }
}

/* md */
@media screen and (min-width: 960px) {
  header {
    //min-width: 1080px;


    .sm-nav, .sm-nav-dropdown {
      display: none;
    }

    .logo {
      margin-top: 5px;
      margin-left: 30px;
    }

    .category div {
      margin-top: 17px;

      .item {
        margin-right: 10px;
        font-size: 16px;
        color: wheat;
      }

      .item:hover {
        color: white;
        box-shadow: 0 0 25px 8px #db0303;
      }
    }

    .search {
      margin-top: 10px;
    }

    .login {
      margin-top: 17px;
    }

    .el-icon-d-arrow-left {
      margin-left: 20px;
      margin-right: 20px;
      font-size: 20px;
      color: wheat;
    }

    .back:hover, .add:hover {
      font-weight: bolder !important;
      color: white !important;
    }

    .back {
      margin-left: 50px;
    }

    .add {
      margin-left: 20px;
      font-size: 30px;
      color: #d2bb91 !important;
    }

    .md-msg {
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .avatar-box {
      display: inline-block;
      position: absolute;
    }

    .avatar {
      border: 2px solid white;
      border-radius: 50%;
      box-shadow: 0 0 20px 6px white;
    }

    .avatar-box:hover .dropdown {
      display: block;
    }

    .dropdown {
      position: relative;
      display: none;
      top: 5px;
      right: 70px;
      width: 150px;
      height: 190px;
      line-height: 42px;
      padding-top: 10px;
      text-align: center;
      border-radius: 5px;
      background-color: #222222;
      z-index: 100;

      .item:hover {
        color: white;
        box-shadow: 0 0 18px 6px white;
      }
    }
  }
}

/* sm  */
@media only screen and (max-width: 960px) {

  header {
    min-width: 375px;

    .logo {
      margin-top: 5px;
    }

    .category, .search, .login {
      display: none;
    }

    .sm-nav {
      position: absolute;
      right: 18px;
      top: 0;
      z-index: 8888 !important;

      .sm-back {
        margin-right: 40px;
      }

      .nuxt-link {
        color: white;
      }
    }

    .sm-nav-dropdown {
      position: absolute;
      width: 100%;
      top: 60px;
      left: 0;
      background-color: #181717;
      z-index: 100;

      .sm-search {
        display: flex;
        justify-content: center;
      }

      .search-input {
        position: relative;
        width: 70%;
        padding: 30px 0;
      }

      .el-button {
        position: absolute;
        top: 7px;
        right: 17px;
        height: 43px;
      }

      .item {
        display: block;
        line-height: 35px;
        text-align: center;
        font-size: 18px;
        color: #958e8e;
      }

      .item:hover {
        color: white;
        background: none;
        box-shadow: 0 0 25px 8px #f5f5f5;
      }
    }

    // sm-下拉菜单过渡动画效果
    .nav {
      overflow: hidden; // 让文字和动画一起显示
    }

    .nav-enter {
      opacity: 0;
    }

    // 开关图标
    .icon-shousuo, .icon-xingzhuang {
      display: inline-block;
      margin-top: 20px;
    }

    // 搜索图标
    .el-icon-search {
      border-radius: 4px;

    }

    .el-input-group__append button.el-button {
      font-size: 20px;
    }

    // 过滤动画结束状态（进入）
    .nav-enter-to {
      opacity: 1;
    }

    // 定义动画时间、速率
    .nav-enter-active {
      transition: all .5s linear;
    }

    .sm-avatar-box {
      display: flex;
      justify-content: center;
      padding-top: 20px;
      align-items: center;

      // 头像 / 消息通知
      .sm-avatar {
        margin: 0 20px;
        border-radius: 50%;
        box-shadow: 0 0 15px 4px white;
      }

      .sm-avatar:hover {
        box-shadow: 0 0 25px 8px white;
      }
    }

    .line {
      border-bottom: #515357 1px solid;
      margin: 10px auto;
      background-color: #181717;
    }
  }
}


</style>
